<template>
    <div class="points-manage-container">
      <!-- 积分展示 -->
      <el-card class="points-card">
        <div class="points-header">
          <h2>当前积分</h2>
          <p class="points-value">678 分</p>
          <p class="points-rate">600 积分 = 1 元</p>
        </div>
      </el-card>
  
      <!-- 提现表单 -->
      <el-card class="withdraw-form-card">
        <h3>提现申请</h3>
        <el-form :model="withdrawForm" :rules="withdrawRules" ref="withdrawForm" label-width="100px">
          <el-form-item label="可兑换金额">
            <span class="exchange-amount">1.13 元</span>
          </el-form-item>
          <el-form-item label="提现金额" prop="amount">
            <el-input
              v-model="withdrawForm.amount"
              placeholder="请输入提现金额"
              style="width: 200px;"
              :max="exchangeAmount"
            ></el-input>
          </el-form-item>
          <el-form-item label="提现账户" prop="account">
            <el-select v-model="withdrawForm.account" placeholder="请选择提现账户" style="width: 200px;">
              <el-option label="支付宝" value="alipay"></el-option>
              <el-option label="微信" value="wechat"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitWithdraw">提交提现</el-button>
          </el-form-item>
        </el-form>
      </el-card>
  
      <!-- 提现记录 -->
      <el-card class="withdraw-history-card">
        <h3>提现记录</h3>
        <el-table :data="withdrawHistory" style="width: 100%">
          <el-table-column prop="time" label="时间" width="180"></el-table-column>
          <el-table-column prop="amount" label="金额" width="120"></el-table-column>
          <el-table-column prop="account" label="账户" width="120"></el-table-column>
          <el-table-column prop="status" label="状态" width="120">
            <template slot-scope="scope">
              <el-tag :type="scope.row.status === '成功' ? 'success' : 'danger'">
                {{ scope.row.status }}
              </el-tag>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-pagination
          class="pagination"
          :page-size="pageSize"
          :current-page="currentPage"
          :total="total"
          layout="prev, pager, next"
          @current-change="handlePageChange"
        />
      </el-card>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        name:'pointsManage',
        points: '1000', // 当前积分
        withdrawForm: {
          amount: '', // 提现金额
          account: '', // 提现账户
        },
        withdrawRules: {
          amount: [
            { required: true, message: '请输入提现金额', trigger: 'blur' },
            { pattern: /^\d+$/, message: '金额必须为数字', trigger: 'blur' },
            { validator: this.validateAmount, trigger: 'blur' },
          ],
          account: [
            { required: true, message: '请选择提现账户', trigger: 'change' },
          ],
        },
        withdrawHistory: [ // 提现记录
          { time: '2025-01-04 12:00', amount: '100', account: '支付宝', status: '成功' },
          { time: '2023-09-25 14:30', amount: '200', account: '微信', status: '失败' },
        ],
        currentPage: 1, // 当前页码
        pageSize: 5, // 每页显示条数
        total: 10, // 总条数
      };
    },
    computed: {
      // 计算可兑换金额
      exchangeAmount() {
        return (this.points / 600).toFixed(2); // 600 积分 = 1 元
      },
    },
    methods: {
      // 提交提现申请
      submitWithdraw() {
        this.$refs.withdrawForm.validate((valid) => {
          if (valid) {
            // 调用提现接口
            this.$http.post('/api/withdraw', this.withdrawForm).then((response) => {
              this.$message.success('提现申请已提交');
              this.loadPoints(); // 刷新积分
              this.loadWithdrawHistory(); // 刷新提现记录
            }).catch((error) => {
              this.$message.error('提现失败，请重试');
            });
          } else {
            this.$message.error('请检查表单内容');
          }
        });
      },
      // 加载积分
      loadPoints() {
        this.$http.get('/api/points').then((response) => {
          this.points = response.data.points;
        });
      },
      // 加载提现记录
      loadWithdrawHistory() {
        this.$http.get('/api/withdraw/history', {
          params: {
            page: this.currentPage,
            size: this.pageSize,
          },
        }).then((response) => {
          this.withdrawHistory = response.data.records;
          this.total = response.data.total;
        });
      },
      // 分页切换
      handlePageChange(page) {
        this.currentPage = page;
        this.loadWithdrawHistory();
      },
      // 验证提现金额
      validateAmount(rule, value, callback) {
        if (value > this.exchangeAmount) {
          callback(new Error('提现金额不能超过可兑换金额'));
        } else {
          callback();
        }
      },
    },
    mounted() {
      this.loadPoints();
      this.loadWithdrawHistory();
    },
  };
  </script>
  
  <style scoped>
  .points-manage-container {
    padding: 20px;
    background-color: #f5f7fa;
  }
  
  .points-card {
    text-align: center;
    margin-bottom: 20px;
    background-color: #409eff;
    color: #fff;
  }
  
  .points-header h2 {
    margin: 0;
    font-size: 24px;
  }
  
  .points-value {
    font-size: 36px;
    font-weight: bold;
    margin: 10px 0;
  }
  
  .points-rate {
    font-size: 14px;
    margin: 0;
  }
  
  .withdraw-form-card,
  .withdraw-history-card {
    margin-bottom: 20px;
  }
  
  .exchange-amount {
    font-size: 18px;
    color: #67c23a;
    font-weight: bold;
  }
  
  .pagination {
    margin-top: 20px;
    text-align: right;
  }
  </style>